﻿<!DOCTYPE html>
<html>
  <head>
    <title>顶部工具栏 Top Toolbar</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=1440, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="files/______top_toolbar/styles.css" type="text/css" rel="stylesheet"/>
    <link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" type="text/css" rel="stylesheet"/>
    <script src="resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script src="resources/scripts/prototypePre.js"></script>
    <script src="data/document.js"></script>
    <script src="resources/scripts/prototypePost.js"></script>
    <script src="files/______top_toolbar/data.js"></script>
    <script type="text/javascript">
      $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; };
      $axure.utils.getOtherPath = function() { return 'resources/Other.html'; };
      $axure.utils.getReloadPath = function() { return 'resources/reload.html'; };
    </script>
  </head>
  <body>
    <div id="base" class="">

      <!-- Unnamed (元件标题) -->

      <!-- 背景 (Dynamic Panel) -->
      <div id="u11677" class="ax_default" data-label="背景">
        <div id="u11677_state0" class="panel_state" data-label="State1" style="">
          <div id="u11677_state0_content" class="panel_state_content">
          </div>
        </div>
      </div>

      <!-- 线条 (Dynamic Panel) -->
      <div id="u11678" class="ax_default" data-label="线条">
        <div id="u11678_state0" class="panel_state" data-label="State1" style="">
          <div id="u11678_state0_content" class="panel_state_content">
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11679" class="ax_default _默认样式">
        <div id="u11679_div" class=""></div>
        <div id="u11679_text" class="text ">
          <p><span style="font-family:'FontAwesome Bold', 'FontAwesome';"></span><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';"> 元件标题</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11680" class="ax_default _默认样式">
        <div id="u11680_div" class=""></div>
        <div id="u11680_text" class="text ">
          <p><span style="font-family:'FontAwesome';font-weight:400;"></span><span style="font-family:'微软雅黑';font-weight:400;"> </span><span style="font-family:'FontAwesome';font-weight:400;">作品首页</span></p>
        </div>
      </div>

      <!-- Unnamed (版权信息) -->

      <!-- Unnamed (Rectangle) -->
      <div id="u11682" class="ax_default _默认样式">
        <img id="u11682_img" class="img " src="images/___icons/u605.png"/>
        <div id="u11682_text" class="text ">
          <p><span>Copyright © </span><a id="u11683" class="link"><span>http://t.cn/EPh287q</span></a><span>, All Rights Reserved.</span></p><p><span>打造高保真原型，快人一步</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u11684" class="ax_default" data-left="20" data-top="100" data-width="1100" data-height="130">

        <!-- Unnamed (Rectangle) -->
        <div id="u11685" class="ax_default _默认样式">
          <div id="u11685_div" class=""></div>
          <div id="u11685_text" class="text ">
            <p style="font-size:14px;"><span style="font-family:'微软雅黑 Bold', '微软雅黑 Regular', '微软雅黑';font-weight:700;">使用说明</span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">顶部工具栏始终固定在页面顶部区域，为页面重要功能提供快速操作入口，本页提供了多种类型的顶部工具栏元素。演示示例中的工具栏使用母版进行了封装，复用起来非常方便，但需要对动态面板的功能有一定的掌握。使用时将工具栏母版复制到你的原型中，然后修改母版中动态面板里面的相关元素即可。工具栏的显示位置通过动态面板的“固定到浏览器”选项进行设置。如果需要修改工具栏的背景色，可以修改母版内命名为“背景”的矩形的填充颜色。另外，通过新增多个动态面板的状态，可以实现状态切换的交互效果。</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u11686" class="ax_default _默认样式">
          <div id="u11686_div" class=""></div>
          <div id="u11686_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11687" class="ax_default _默认样式">
        <div id="u11687_div" class=""></div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u11688" class="ax_default" data-left="40" data-top="1271" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u11689" class="ax_default _默认样式">
          <div id="u11689_div" class=""></div>
          <div id="u11689_text" class="text ">
            <p><span>请输入用户名称</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u11690" class="ax_default _默认样式">
          <div id="u11690_div" class=""></div>
          <div id="u11690_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u11691" class="ax_default" data-left="300" data-top="1271" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u11692" class="ax_default _默认样式">
          <div id="u11692_div" class=""></div>
          <div id="u11692_text" class="text ">
            <p><span>请输入登录密码</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u11693" class="ax_default _默认样式">
          <div id="u11693_div" class=""></div>
          <div id="u11693_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11694" class="ax_default _默认样式">
        <div id="u11694_div" class=""></div>
        <div id="u11694_text" class="text ">
          <p><span>登录</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11695" class="ax_default _默认样式">
        <div id="u11695_div" class=""></div>
        <div id="u11695_text" class="text ">
          <p><span>注册新用户</span></p>
        </div>
      </div>

      <!-- 独立复选框 (Group) -->
      <div id="u11696" class="ax_default" data-label="独立复选框" data-left="550" data-top="1271" data-width="130" data-height="40">

        <!-- text (Rectangle) -->
        <div id="u11697" class="ax_default _默认样式" data-label="text">
          <div id="u11697_div" class=""></div>
          <div id="u11697_text" class="text ">
            <p><span>记住登录状态</span></p>
          </div>
        </div>

        <!-- 复选图标 (Rectangle) -->
        <div id="u11698" class="ax_default _默认样式" data-label="复选图标">
          <img id="u11698_img" class="img " src="images/___badge/u3437.png"/>
          <div id="u11698_text" class="text ">
            <p><span> </span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11699" class="ax_default _默认样式">
        <div id="u11699_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11700" class="ax_default _默认样式">
        <div id="u11700_div" class=""></div>
        <div id="u11700_text" class="text ">
          <p><span>LOGO</span></p>
        </div>
      </div>

      <!-- 搜索输入框 (Group) -->
      <div id="u11701" class="ax_default" data-label="搜索输入框" data-left="594" data-top="1151" data-width="240" data-height="40">

        <!-- 边框 (Rectangle) -->
        <div id="u11702" class="ax_default _默认样式" data-label="边框">
          <img id="u11702_img" class="img " src="images/______top_toolbar/边框_u11702.png"/>
        </div>

        <!-- 输入框 (Text Field) -->
        <div id="u11703" class="ax_default _默认样式" data-label="输入框">
          <input id="u11703_input" type="text" value="" maxlength="20"/>
        </div>

        <!-- 清除 (Rectangle) -->
        <div id="u11704" class="ax_default _默认样式 ax_default_hidden" data-label="清除" style="display:none; visibility: hidden">
          <div id="u11704_div" class=""></div>
          <div id="u11704_text" class="text ">
            <p><span></span></p>
          </div>
        </div>

        <!-- 图标 (Rectangle) -->
        <div id="u11705" class="ax_default _默认样式" data-label="图标">
          <div id="u11705_div" class=""></div>
          <div id="u11705_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11706" class="ax_default _默认样式">
        <div id="u11706_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11707" class="ax_default _默认样式">
        <div id="u11707_div" class=""></div>
        <div id="u11707_text" class="text ">
          <p style="font-size:20px;"><span style="font-family:'FontAwesome';font-weight:400;"></span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">收藏</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11708" class="ax_default _默认样式">
        <div id="u11708_div" class=""></div>
        <div id="u11708_text" class="text ">
          <p style="font-size:20px;"><span style="font-family:'FontAwesome';font-weight:400;"></span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">评论</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11709" class="ax_default _默认样式">
        <div id="u11709_div" class=""></div>
        <div id="u11709_text" class="text ">
          <p style="font-size:20px;"><span style="font-family:'FontAwesome';font-weight:400;"></span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">消息</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11710" class="ax_default _默认样式">
        <div id="u11710_div" class=""></div>
        <div id="u11710_text" class="text ">
          <p><span></span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11711" class="ax_default _默认样式">
        <div id="u11711_div" class=""></div>
        <div id="u11711_text" class="text ">
          <p><span>专注交互原型设计</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11712" class="ax_default _默认样式">
        <div id="u11712_div" class=""></div>
        <div id="u11712_text" class="text ">
          <p><span>请输入用户名称</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11713" class="ax_default _默认样式">
        <div id="u11713_div" class=""></div>
        <div id="u11713_text" class="text ">
          <p><span>立即注册</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11714" class="ax_default _默认样式">
        <div id="u11714_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11715" class="ax_default _默认样式">
        <div id="u11715_div" class=""></div>
        <div id="u11715_text" class="text ">
          <p style="font-size:16px;"><span style="font-family:'FontAwesome';font-weight:400;color:#999999;"></span><span style="font-family:'ArialMT', 'Arial';font-weight:400;color:#999999;">&nbsp; </span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;color:#999999;">验证邮件已发送至</span><span style="font-family:'ArialMT', 'Arial';font-weight:400;font-size:14px;color:#7A8792;"> </span><span style="font-family:'ArialMT', 'Arial';font-weight:400;font-size:14px;color:#409EFF;">88888@gmail.com&nbsp; </span><span style="font-family:'微软雅黑';font-weight:400;font-size:14px;color:#999999;">请根据邮件提示完成验证后进行登录，如未收到邮件可以点击按纽重新发送。</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11716" class="ax_default _默认样式">
        <div id="u11716_div" class=""></div>
        <div id="u11716_text" class="text ">
          <p><span>重新发送</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11717" class="ax_default _默认样式">
        <div id="u11717_div" class=""></div>
        <div id="u11717_text" class="text ">
          <p><span>请输入邮箱地址</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11718" class="ax_default _默认样式">
        <div id="u11718_div" class=""></div>
        <div id="u11718_text" class="text ">
          <p><span>请设置账号密码</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11719" class="ax_default _默认样式">
        <div id="u11719_div" class=""></div>
        <div id="u11719_text" class="text ">
          <p><span>新用户快速注册</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11720" class="ax_default _默认样式">
        <div id="u11720_div" class=""></div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u11721" class="ax_default" data-left="43" data-top="1792" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u11722" class="ax_default _默认样式">
          <div id="u11722_div" class=""></div>
          <div id="u11722_text" class="text ">
            <p><span>请输入用户名称</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u11723" class="ax_default _默认样式">
          <div id="u11723_div" class=""></div>
          <div id="u11723_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u11724" class="ax_default" data-left="303" data-top="1792" data-width="240" data-height="40">

        <!-- Unnamed (Rectangle) -->
        <div id="u11725" class="ax_default _默认样式">
          <div id="u11725_div" class=""></div>
          <div id="u11725_text" class="text ">
            <p><span>请输入登录密码</span></p>
          </div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u11726" class="ax_default _默认样式">
          <div id="u11726_div" class=""></div>
          <div id="u11726_text" class="text ">
            <p><span></span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11727" class="ax_default _默认样式">
        <div id="u11727_div" class=""></div>
        <div id="u11727_text" class="text ">
          <p><span>登录</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11728" class="ax_default _默认样式">
        <div id="u11728_div" class=""></div>
        <div id="u11728_text" class="text ">
          <p><span>注册新用户</span></p>
        </div>
      </div>

      <!-- 独立复选框 (Group) -->
      <div id="u11729" class="ax_default" data-label="独立复选框" data-left="553" data-top="1792" data-width="130" data-height="40">

        <!-- text (Rectangle) -->
        <div id="u11730" class="ax_default _默认样式" data-label="text">
          <div id="u11730_div" class=""></div>
          <div id="u11730_text" class="text ">
            <p><span>记住登录状态</span></p>
          </div>
        </div>

        <!-- 复选图标 (Rectangle) -->
        <div id="u11731" class="ax_default _默认样式" data-label="复选图标">
          <img id="u11731_img" class="img " src="images/___badge/u3437.png"/>
          <div id="u11731_text" class="text ">
            <p><span> </span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11732" class="ax_default _默认样式">
        <div id="u11732_div" class=""></div>
        <div id="u11732_text" class="text ">
          <p style="font-size:14px;"><span style="font-family:'FontAwesome';font-weight:400;font-size:16px;"></span><span style="font-family:'微软雅黑';font-weight:400;">&nbsp; 用户名不能为空</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11733" class="ax_default _默认样式">
        <div id="u11733_div" class=""></div>
        <div id="u11733_text" class="text ">
          <p style="font-size:14px;"><span style="font-family:'FontAwesome';font-weight:400;font-size:16px;"></span><span style="font-family:'微软雅黑';font-weight:400;">&nbsp; 登录密码不能为空</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11734" class="ax_default _默认样式">
        <div id="u11734_div" class=""></div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11735" class="ax_default _默认样式">
        <div id="u11735_div" class=""></div>
        <div id="u11735_text" class="text ">
          <p style="font-size:20px;"><span style="font-family:'FontAwesome';font-weight:400;color:#0079FE;"></span><span style="font-family:'ArialMT', 'Arial';font-weight:400;font-size:16px;color:#999999;">&nbsp; 登录成功，页面将在3秒后刷新</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11736" class="ax_default _默认样式">
        <div id="u11736_div" class=""></div>
        <div id="u11736_text" class="text ">
          <p><span>返回登录</span></p>
        </div>
      </div>

      <!-- Unnamed (Group) -->
      <div id="u11737" class="ax_default" data-left="20" data-top="250" data-width="1100" data-height="800">

        <!-- Unnamed (Rectangle) -->
        <div id="u11738" class="ax_default _默认样式">
          <div id="u11738_div" class=""></div>
        </div>

        <!-- Unnamed (Rectangle) -->
        <div id="u11739" class="ax_default _默认样式">
          <img id="u11739_img" class="img " src="images/______top_toolbar/u11739.png"/>
          <div id="u11739_text" class="text ">
            <p style="font-size:20px;line-height:24px;"><span style="color:#333333;"><br></span></p><p style="font-size:32px;line-height:48px;"><span style="color:#333333;">专注交互原型设计</span></p><p style="font-size:14px;line-height:24px;"><span style="color:#CCCCCC;">本区域为内容占位区，用来辅助相关元件的展示</span></p><p style="font-size:14px;line-height:24px;"><span style="color:#CCCCCC;">欢迎访问店铺：http://t.cn/EPh287q</span></p>
          </div>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11740" class="ax_default _默认样式">
        <div id="u11740_div" class=""></div>
        <div id="u11740_text" class="text ">
          <p><span>顶部工具栏常用元素</span></p>
        </div>
      </div>

      <!-- Unnamed (Rectangle) -->
      <div id="u11741" class="ax_default _默认样式">
        <div id="u11741_div" class=""></div>
        <div id="u11741_text" class="text ">
          <p><span>顶部工具栏表单反馈</span></p>
        </div>
      </div>

      <!-- Unnamed (顶部工具栏) -->

      <!-- 顶部工具栏 (Dynamic Panel) -->
      <div id="u11743" class="ax_default" data-label="顶部工具栏">
        <div id="u11743_state0" class="panel_state" data-label="State1" style="">
          <div id="u11743_state0_content" class="panel_state_content">

            <!-- 背景 (Dynamic Panel) -->
            <div id="u11744" class="ax_default" data-label="背景">
              <div id="u11744_state0" class="panel_state" data-label="State1" style="">
                <div id="u11744_state0_content" class="panel_state_content">

                  <!-- 背景 (Rectangle) -->
                  <div id="u11745" class="ax_default _默认样式" data-label="背景">
                    <div id="u11745_div" class=""></div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u11746" class="ax_default _默认样式">
              <div id="u11746_div" class=""></div>
              <div id="u11746_text" class="text ">
                <p><span>LOGO</span></p>
              </div>
            </div>

            <!-- 搜索输入框 (Group) -->
            <div id="u11747" class="ax_default" data-label="搜索输入框" data-left="612" data-top="20" data-width="240" data-height="40">

              <!-- 边框 (Rectangle) -->
              <div id="u11748" class="ax_default _默认样式" data-label="边框">
                <img id="u11748_img" class="img " src="images/______top_toolbar/边框_u11702.png"/>
              </div>

              <!-- 输入框 (Text Field) -->
              <div id="u11749" class="ax_default _默认样式" data-label="输入框">
                <input id="u11749_input" type="text" value="" maxlength="20"/>
              </div>

              <!-- 清除 (Rectangle) -->
              <div id="u11750" class="ax_default _默认样式 ax_default_hidden" data-label="清除" style="display:none; visibility: hidden">
                <div id="u11750_div" class=""></div>
                <div id="u11750_text" class="text ">
                  <p><span></span></p>
                </div>
              </div>

              <!-- 图标 (Rectangle) -->
              <div id="u11751" class="ax_default _默认样式" data-label="图标">
                <div id="u11751_div" class=""></div>
                <div id="u11751_text" class="text ">
                  <p><span></span></p>
                </div>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u11752" class="ax_default _默认样式">
              <div id="u11752_div" class=""></div>
              <div id="u11752_text" class="text ">
                <p style="font-size:20px;"><span style="font-family:'FontAwesome';font-weight:400;"></span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">收藏</span></p>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u11753" class="ax_default _默认样式">
              <div id="u11753_div" class=""></div>
              <div id="u11753_text" class="text ">
                <p style="font-size:20px;"><span style="font-family:'FontAwesome';font-weight:400;"></span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">评论</span></p>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u11754" class="ax_default _默认样式">
              <div id="u11754_div" class=""></div>
              <div id="u11754_text" class="text ">
                <p style="font-size:20px;"><span style="font-family:'FontAwesome';font-weight:400;"></span></p><p style="font-size:12px;"><span style="font-family:'微软雅黑';font-weight:400;">消息</span></p>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u11755" class="ax_default _默认样式">
              <div id="u11755_div" class=""></div>
              <div id="u11755_text" class="text ">
                <p><span></span></p>
              </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u11756" class="ax_default _默认样式">
              <div id="u11756_div" class=""></div>
              <div id="u11756_text" class="text ">
                <p><span>专注交互原型设计</span></p>
              </div>
            </div>

            <!-- 热区占位 (Hot Spot) -->
            <div id="u11757" class="ax_default" data-label="热区占位">
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
